<template>
	<view class="personal" style="background-color: rgb(245, 245, 245);height: calc(100vh - 0px - 50px);">
		<navBar title="Personal center" :home="true"></navBar>
		<view class="content" >
			<view class="per-info card">
				<view class="per-avatar">
					<view class="u-avatar"
						style="height: 60px; width: 60px; flex: 0 0 60px; background-color: transparent; border-radius: 5px;">
						<image :src="newusermsg.avatar" class="u-avatar__img"
							style="border-radius: 5px; height: 60px;"></image>
					</view>
				</view>

				<view class="per-account">
					<text><span>{{newusermsg.name}}</span></text>
					<text><span>账号:{{newusermsg.phone}}</span></text>
				</view>
			</view>

			<view class="per-desc card">
				<text><span>个性签名: {{newusermsg.desc}}</span></text>
			</view>

			<view class="per-collection card">
				<view class="card-item">
					<navigator class="navigator-css" url="/subpages/myblog/myblog">
						<view class="u-icon card-ico u-icon--right">
							<text class="u-icon__icon uicon-file-text u-iconfont"
								style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
						</view>
						<view class="card-right">我的博客
							<view class="u-icon u-icon--right"><text class="u-icon__icon uicon-arrow-right u-iconfont"
									style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
							</view>
						</view>
					</navigator>
				</view>
				<view class="card-item">
					<navigator class="navigator-css" url="/subpages/followauthor/followauthor">
						<view class="u-icon card-ico u-icon--right">
							<text class="u-icon__icon uicon-file-text u-iconfont"
								style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
						</view>
						<view class="card-right">我的关注
							<view class="u-icon u-icon--right"><text class="u-icon__icon uicon-arrow-right u-iconfont"
									style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
							</view>
						</view>
					</navigator>
				</view>
				<view class="card-item">
					<navigator class="navigator-css" url="/subpages/praise/praise">
						<view class="u-icon card-ico u-icon--right">
							<text class="u-icon__icon uicon-file-text u-iconfont"
								style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
						</view>
						<view class="card-right">我赞过的
							<view class="u-icon u-icon--right"><text class="u-icon__icon uicon-arrow-right u-iconfont"
									style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="per-operation card">
				<view class="card-item">
					<navigator class="navigator-css" url="/subpages/operation/operation">
						<view class="u-icon card-ico u-icon--right">
							<text class="u-icon__icon uicon-file-text u-iconfont"
								style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
						</view>
						<view class="card-right">修改个人信息
							<view class="u-icon u-icon--right"><text class="u-icon__icon uicon-arrow-right u-iconfont"
									style="font-size: 18px; font-weight: normal; top: 0px; color: rgb(242, 174, 39);"><span></span></text>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<button class="u-btn u-line-1 u-fix-ios-appearance u-size-default u-hairline-border u-btn--default"
				app-parameter="" send-message-title="" send-message-path="sendMessagePath" lang="en" data-name=""
				session-from="" send-message-img=""
				style="color: rgb(255, 255, 255); background-color: rgb(242, 174, 39); border-radius: 10px; overflow: visible;" @click="unLogin">注销</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				newusermsg:[]
			}
		},
		onLoad() {
			//	如果用户没有登陆，则跳转到登陆页
			if (!this.userInfo) {
				uni.redirectTo({
					url: '/subpages/login/login'
				})
			}
			console.log(this.userInfo);
		},
		onShow() {
			uni.request({
			    url: 'https://eggblog.bluej.cn/api/user/searchUser', //仅为示例，并非真实接口地址。
			    data: {
			        id:this.userInfo.id,
					projectId: 168
			    },
			    header: {
			        "x-token": this.userInfo.token //自定义请求头信息
			    },
			    success: (res) => {
			        console.log(res);
			        this.newusermsg = res.data.data;
			    }
			});
		},
		methods: {
			unLogin(){
				uni.clearStorageSync();
				
				uni.navigateTo({
					url:'/subpages/login/login'
				})
				
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 14px;
		box-sizing: border-box;

		.card {
			padding: 20px 10px;
			border-radius: 10px;
			background-color: #fff;
			margin-bottom: 10px;
		}

		.per-info {
			display: flex;

			.per-avatar {
				.u-avatar {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					color: #606266;
					border-radius: 10px;
					position: relative;

					.u-avatar__img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.per-account {
				padding: 5px 0 5px 15px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 14px;
				color: #606266;
			}



		}

		.per-collection {
			.card-item {
				font-size: 18px;

				.navigator-css {
					height: auto;
					width: auto;
					display: block;
					cursor: pointer;

					.u-icon--right {
						flex-direction: row;
						align-items: center;
					}

					.u-iconfont:before {
						display: flex;
						align-items: center;
						font: normal normal normal 14px/1 uicon-iconfont;
					}

					.u-icon {
						display: inline-flex;

					}

					.uicon-file-text:before {
						content: "\e663";
						font-size: 18px;
					}

					.card-right {
						width: 290px;
						display: inline-flex;
						justify-content: space-between;
						padding: 10px 0;
						margin-left: 10px;
						color: #606266;
						border-bottom: 0.5px solid hsla(0, 0%, 96.1%, .9);

						.uicon-arrow-right:before {
							content: "\e605";
							font-size: 18px;
						}
					}
				}

				&:nth-child(2) {
					.uicon-file-text:before {
						content: "\e65f";

					}
				}

				&:nth-child(3) {
					.uicon-file-text:before {
						content: "\e733";

					}
				}
			}
		}

		.per-operation {
			.card-item {
				font-size: 18px;

				.navigator-css {
					height: auto;
					width: auto;
					display: block;
					cursor: pointer;

					.u-icon--right {
						flex-direction: row;
						align-items: center;
					}

					.u-iconfont:before {
						display: flex;
						align-items: center;
						font: normal normal normal 14px/1 uicon-iconfont;
					}

					.u-icon {
						display: inline-flex;

					}

					.uicon-file-text:before {
						content: "\e61f";
						font-size: 18px;
					}

					.card-right {
						width: 290px;
						display: inline-flex;
						justify-content: space-between;
						padding: 10px 0;
						margin-left: 10px;
						color: #606266;
						border-bottom: 0.5px solid hsla(0, 0%, 96.1%, .9);

						.uicon-arrow-right:before {
							content: "\e605";
							font-size: 18px;
						}
					}
				}
			}
		}

		.u-size-default {
			font-size: 15px;
			height: 40px;
			line-height: 40px;
		}

		.u-btn--default {
			color: #606266;
			border-color: #c0c4cc;
			background-color: #fff;
		}

		.u-btn {
			position: relative;
			border: 0;
			display: inline-flex;
		    overflow: visible;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			padding: 0 20px;
			z-index: 1;
			box-sizing: border-box;
			transition: all .15s;
		}

		.u-line-1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		button {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-left: 14px;
			padding-right: 14px;
			box-sizing: border-box;
			font-size: 18px;
			text-align: center;
			text-decoration: none;
			line-height: 2.55555556;
			border-radius: 5px;
			overflow: hidden;
			color: #000;
			background-color: #f8f8f8;
			cursor: pointer;
		}
	}
</style>
